<template>
  <div class="home">
    <header class="tc ">
      <h1 class="title pr pr20 pl20 f35 cfff fn">
        <router-link class="img pa cfff" to="/upWash">
          <i class="el-icon-arrow-left  f40 "></i>
        </router-link>
        确认订单
      </h1>
    </header>
    <main class="p20">
      <section class="main-order bcfff mb20">
        <ul class="img flex jcsa cfff mb30 p20">
          <li class="order">
            <p>预约服务</p>
          </li>
          <li class="wd125">
            <div class=" border-dash"></div>
          </li>
          <li class="pay">
            <p>支付订单</p>
          </li>
          <li class="wd125">
            <div class="border-dash"></div>
          </li>
          <li class="store">
            <p>门店服务</p>
          </li>
        </ul>
        <div class="line mb50" style="height:7rem"></div>
        <ul class="info ">
          <li class="flex mb35">
            <img class="store asc mr20" src="../../../assets/img/wash-car-img/store.png">
            <div>
              <h2 class="mb15 fn">{{ obj.storeName }}</h2>
              <p class="c808">{{ obj.address }}</p>
            </div>
          </li>
          <li class="flex  mb50">
            <img class="store asc mr20" src="../../../assets/img/wash-car-img/user.png">
            <div class="flex jcsb fg1">
              <h2 class="fn">{{ obj.name }}</h2>
              <p class=" asc c808"> {{ obj.tel }}</p>
            </div>
          </li>
          <li class="flex  mb40" @click="carName">
            <img class="store asc mr20" src="../../../assets/img/wash-car-img/car.png">
            <div class="flex jcsb fg1">
              <h2 class="fn">{{ obj.carName }}</h2>
              <a class="select" href="#">
                <img src="../../../assets/img/wash-car-img//arrow.png">
              </a>
            </div>
          </li>
          <div class="line w100" style="height: 2rem;"></div>
          <li class="mt40 mb40">
            <div class="flex jcsb fg1">
              <h2 class="fn">服务产品</h2>
              <p>共选择<span class="c297e">{{ obj.num }}项</span>服务产品</p>
            </div>
          </li>
          <li class="flex mb40">
            <h2 class="mr20 fn">精洗汽车</h2>
            <h2 class="fn  cff40">￥{{ obj.price }}</h2>
          </li>
          <div class="line w100" style="height: 2rem;"></div>
          <li class=" mt40 flex">
            <img class="store asc mr20" src="../../../assets/img/wash-car-img/card.png">
            <div class="flex jcsb fg1">
              <h2 class="fn">代金券/优惠券</h2>
              <p>
                <span class="mr25 cff40">-{{ obj.card }}元</span>
                <a class="select" @click="toCard">
                  <img src="../../../assets/img/wash-car-img/arrow.png">
                </a>
              </p>
            </div>
          </li>
        </ul>
      </section>
      <!-- password -->
      <section class="password pf bcfff tc" v-if="isPassword" @click="toInfo">
        <div class="flex mb50">
          <a href="#" @click="onCancel">
            <img src="../../../assets/img/wash-car-img/wrong.png">
          </a>
          <h3 class="f25 fn fg1 tc">请输入支付密码</h3>
        </div>
        <p class="f20 mb20" style="color: #333;">车辆服务平台</p>
        <h1 class="f50 mb30 fn">￥ {{ obj.price }}</h1>
        <div class="line mb25" style="height: 2rem;"></div>
        <div class="flex jcsb mb30 c808">
          <p class="f25">支付方式</p>
          <p>
            <span class="mr15">零钱</span>
            <a class="select" href="#">
              <img src="../../../assets/img/wash-car-img/arrow-grey.png">
            </a>
          </p>
        </div>
        <ul class="input flex jcsa pb40">
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
        </ul>
      </section>
    </main>
    <!-- footer -->
    <ul class="footer  bcff  flex pf w100 jcsb f20 aic">
      <li>
        <a class="c000 ml20" @click="onShow">
          <img class="waiter mr10 " src="../../../assets/img/wash-car-img/waiter.png">
          联系客服
        </a>
      </li>
      <li class="flex">
        <p class="f25 cff40 asc mr20">合计：<span class="f20">￥{{ obj.price }}</span></p>
        <a class="pay-order f25 cfff mr20" @click="onPassword">
          立即下单
        </a>
      </li>
    </ul>
    <!-- call -->
    <ul class="call tc bcff w100 pf f25" v-show="isCall">
      <li>
        <span>18642589456</span>
      </li>
      <div class="line " style="height:2rem"></div>
      <li>
        <span>复制</span>
      </li>
      <div class="line " style="height: 7rem;"></div>
      <li>
        <span @click="onCancel">取消拨号</span>
      </li>
    </ul>
    <!-- shade-->
    <div class="shade pa" v-show="isShade"></div>
  </div>
</template>
<script>
export default {
  methods: {
    carName(){
      this.$router.push({
        path:'/upSelectCar'
      })
    },
    onShow() {
      this.isCall = true;
      this.isShade = true;
    },
    onCancel() {
      this.isCall = false;
      this.isShade = false;
      this.isPassword = false;
    },
    onPassword() {
      this.isPassword = true;
      this.isShade = true;
    },
    // 跳转至订单详情
    toInfo() {
      this.$router.push('upPayOrder')
    },
    //跳转优惠劵页面
    toCard() {
      this.$router.push('upCard')
    }
  },
  data() {
    return {
      isPassword: false,
      isCall: false,
      isShade: false,
      obj: {
        storeName: "伟业汽车美容店（人民路店）",
        address: "山阳区人民中路33号",
        name: "张先生",
        tel: "18656894566",
        carName: "奔驰FWE4/豫A56487",
        num: 1,
        price: 39.9,
        card: 10
      }
    }
  }
}
</script>
<style scoped>
.cff40 {
  color: #ff4000;
}

.c297e {
  color: #297efa;
}

.c808 {
  color: #808080;
}

.wd125 {
  width: 125rem;
}

.border-dash {
  height: 50rem;
  border-bottom: 2rem dashed #e1e1e1;
}

.mb35 {
  margin-bottom: 35rem;
}

.asc {
  align-self: center;
}

.line {
  height: 1rem;
  background-color: #f7f7f7;
}

.home {
  background-color: #f7f7f7;
}

/* 头部样式  ---需要可剪切 */
header .title {
  height: 145rem;
  line-height: 145rem;
}

header {
  height: 435rem;
  background-color: #3385fd;
}

header .img {
  width: auto;
  left: 20rem;
  top: 0;
}

main {
  margin-top: -310rem;
}

main section {
  padding: 40rem 30rem;
  border-radius: 20rem;
  box-sizing: border-box;
}

/* 图片ul样式 */
section.main-order .img li {
  width: 100rem;
  height: 100rem;
}

section.main-order ul.img li p {
  font-size: 25rem;
  width: 50rem;
  height: 50rem;
  transform: translate(50%, 40%);
  line-height: 30rem;
}

section.main-order ul.img li.order {
  background: url(../../../assets/img/wash-car-img/round-blue.png) no-repeat;
  background-size: 100rem auto;
}

section.main-order ul.img li.pay {
  background: url(../../../assets/img/wash-car-img/round-green.png) no-repeat;
  background-size: 100rem auto;
}

section.main-order ul.img li.store {
  background: url(../../../assets/img/wash-car-img/round-red.png)no-repeat;
  background-size: 100rem auto;
}

/* 信息ul */
section.main-order ul.info li img {
  width: 37rem;
  height: auto;
}

section.main-order ul.info h2 {
  font-size: 28rem;
}

section.main-order ul.info p {
  font-size: 20rem;
}

section.main-order ul.info li a.select img {
  width: auto;
  height: 30rem;
  vertical-align: middle;
}

/*支付密码*/
section.password {
  top: 600rem;
  left: 50rem;
  height: 470rem;
  width: 650rem;
  z-index: 10;
}

section.password ul.input li {
  height: 70rem;
  width: 70rem;
  border-radius: 5rem;
  background-color: #f2f2f2;
}

/* 页脚 */
ul.footer {
  height: 115rem;
  left: 0;
  bottom: 0;
  padding: 0 20rem;
  box-sizing: border-box;
  background-color: #fff;
}

ul.footer img.waiter {
  height: 40rem;
  width: auto;
  vertical-align: middle;
}

ul.footer a.pay-order {
  background-color: #1e72f0;
  padding: 20rem 50rem;
  border-radius: 50rem;
}

/* 洗车-拨号 */
ul.call {
  height: 305rem;
  left: 0;
  bottom: 0;
  background-color: #fff;
  padding: 20rem 0;
  border-radius: 20rem 20rem 0 0;
  z-index: 10;
}

ul.call li {
  height: 100rem;
  line-height: 100rem;
}

.shade {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  top: 0;
  left: 0;
}</style>